<template>
  <div class="special-upload">
    <div class="part" v-for="(item, key) in views">
      <div class="top-img thumb" @click="() => uploads(key)">
        <img
          :style="
            item.value
              ? { height: '100%', width: '100%' }
              : { height: '50%', width: '60%' }
          "
          :src="item.valueShow"
        />
        <div
          class="close"
          v-show="item.value"
          @click.stop="() => delImg(key)"
          title="删除"
        >
          <img :src="publicUrl(`/images/img-close.png`)" />
        </div>
      </div>
      <span class="img-name">{{ item.title }}</span>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl, fileToBase64Async } from "@/utils/util";
import getFile from "@/utils/getFile";
import { toast } from "vue3-toastify";

interface Views {
  frontView: { value: File | null; valueShow: string; title: string };
  backView: { value: File | null; valueShow: string; title: string };
  sideView: { value: File | null; valueShow: string; title: string };
  addViewOne: { value: File | null; valueShow: string; title: string };
  addViewTwo: { value: File | null; valueShow: string; title: string };
  addViewThird: { value: File | null; valueShow: string; title: string };
}

const views = ref<Views>({
  frontView: {
    value: null,
    valueShow: publicUrl(`/images/add-img.png`),
    title: "正面图",
  },
  backView: {
    value: null,
    valueShow: publicUrl(`/images/add-img.png`),
    title: "背面图",
  },
  sideView: {
    value: null,
    valueShow: publicUrl(`/images/add-img.png`),
    title: "侧面图",
  },
  addViewOne: {
    value: null,
    valueShow: publicUrl(`/images/add-img.png`),
    title: "附加图",
  },
  addViewTwo: {
    value: null,
    valueShow: publicUrl(`/images/add-img.png`),
    title: "附加图",
  },
  addViewThird: {
    value: null,
    valueShow: publicUrl(`/images/add-img.png`),
    title: "附加图",
  },
});

const uploads = (key: keyof Views) => {
  getFile("image", 500, {
    errorResult: (msg: string) => {
      toast.error(msg);
    },
    successResult: async (file: File) => {
      views.value[key].value = file;
      views.value[key].valueShow = await fileToBase64Async(file);
    },
  });
};

const delImg = (key: keyof Views) => {
  views.value[key].value = null;
  views.value[key].valueShow = publicUrl(`/images/add-img.png`);
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
